<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<header>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title></title>
        <link href="/assets/images/favicon.ico" rel="icon">
        <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
        <link rel="stylesheet" href="/assets/module/admin.css?v=318"/>

        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
        <script type="text/javascript" src="/assets/js/common.js?v=318"></script>
        <style rel="stylesheet">
            /*.layui-table-page {*/
            /*    position: fixed;*/
            /*}*/

            .layui-table-box {
                margin-bottom: 10px;
            }

            .layui-table-page {
                position: relative;
                /* 可根据需要调整上边距 */
            }
            /*.nav{*/
            /*    padding-top: 15px;*/
            /*}*/
            .layui-card-body{
                margin-top: 10px;
            }

            .layui-form-label
            {
                padding: 9px 8px 9px 0px;
            }
        </style>
        <script type="text/javascript">
            var url = window.location.pathname.substring(1);
            var item = url.split("/");
            var C = item[0];
            var A = item[1];
            var cUrl = "/" + C;

        </script>

    </head>
</header>
<body>
<div>
    <div class="layui-card">
        <div class="layui-card-header" style="padding: 10px">
            <form class="layui-form">
                <div class="layui-form-item">
                    <!-- 用户名 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input id="tbUserName" type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 真实姓名 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">真实姓名</label>
                        <div class="layui-input-inline">
                            <input id="tbRealName" type="text" name="realName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 角色 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">角色</label>
                        <div class="layui-input-inline">
                            <select id="tbRole" name="role" lay-filter="role">
                                <option value="">请选择角色</option>
                                <option value="管理员">管理员</option>
                                <option value="班主任">班主任</option>
                                <option value="授课教师">授课教师</option>
                                <option value="指导教师">指导教师</option>
                                <option value="二级学院用户">二级学院用户</option>
                            </select>
                        </div>
                    </div>

                    <!-- 电话 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <input id="tbTel" type="text" name="tel" placeholder="请输入电话" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 按钮区域 -->
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: auto;">
                            <button id="search" class="layui-btn" lay-submit="" lay-filter="searchForm">
                                <i class="layui-icon layui-icon-search"></i> 查询
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">
            <div style="margin: 20px;" class="nav">
                <button id="add" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-add-1"></i> 新增</button>
                <button id="batchImport" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-upload">
                    <input type="file" id="excelFile" accept=".xlsx, .xls" style="display: none;" />
                </i> 批量导入用户数据</button>
<!--                <button class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-download-circle"></i> 导出列表数据</button>-->
            </div>
            <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
            <div class="layui-table-page"></div> <!-- 将分页栏放置在这里 -->

            <script type="text/html" id="barTable">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reset_password">重置密码</a>
            </script>
            <script th:inline="none">
                layui.use(['table', 'form', 'layer'], function () {
                    var $ = layui.jquery;
                    var layer = layui.layer;
                    var form = layui.form
                    var table = layui.table;

                    table.render({
                        elem: '#tableList',
                        url: '/user/list',
                        defaultToolbar: ['filter', 'exports', 'print', {
                            title: '提示',
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }],
                        title: '用户数据',
                        cols: [[
                            {
                                title: '序号', width: 80, templet: function (d) {
                                    return d.LAY_TABLE_INDEX + 1
                                }
                            },
                            {field: 'userName', title: '用户名', width: 120},
                            {field: 'realName', title: '真实姓名', width: 200},
                            {field: 'role', title: '角色', width: 200},
                            {field: 'tel', title: '电话', width: 200},
                            {field: 'email', title: '电子邮件', width: 200},
                            {fixed: 'right', title: '操作', toolbar: '#barTable', width: 200}
                        ]],
                        page: true,
                        limit: 50,
                        limits: [50, 100, 150, 200],
                        id: 'tableList',
                        done: function(e){
                            $('.layui-table').css("width", "100%");
                            $("th[data-field='delete']").css("border-right", 'none');
                        }
                    });
                    $('#search').click(function () {
                        var userName = $('#tbUserName').val();
                        var realName = $('#tbRealName').val();
                        var role = $('#tbRole').val();
                        var tel = $('#tbTel').val();
                        // var index = layer.msg('查询中，请稍后...', {
                        //     icon: 16,
                        //     time: false,
                        //     shade: 0
                        // })
                        var whereParams={
                            userName: userName
                            ,realName: realName
                            ,tel: tel
                            ,role: role
                        }
                        setTimeout(function () {
                            table.reload('tableList', {
                                url: '/user/list',
                                method: 'post',
                                data: JSON.stringify(whereParams),
                                page: {
                                    curr: 1 //从新从第一页开始
                                }
                            });
                            // layer.close(index);
                        })

                    });
                    // 监听工具条
                    table.on('tool(tableList)', function (obj) {
                        var data = obj.data;
                        console.log(obj);
                        if (obj.event == 'del') {
                            var postData = {id: data.id};
                            layer.confirm('真的要删除该数据吗？', function (index) {
                                console.log(data.id);
                                $.ajax({
                                    type: 'POST',
                                    url: "/user/del",
                                    data: postData,
                                    dataType: 'json',
                                    beforeSend: function () {
                                    },
                                    success: function (res) {
                                        console.log(res);
                                        if (res.code == 0) {
                                            $('#search').click();
                                            layer.msg(res.msg);
                                        } else {
                                            layer.msg(res.msg, {
                                                icon: 2,
                                                anim: 6
                                            });
                                        }
                                    }
                                });
                                layer.close(index);
                            })
                        } else if (obj.event == 'edit') {
                            layer.open({
                                type: 2,
                                title: '编辑用户',
                                fixed: false,
                                maxmin: true,
                                area: ['950px', '390px'],
                                content: '/user/editForm?id=' + data.id
                            });

                        } else if (obj.event == "reset_password") {
                            var postData = {id: data.id};
                            layer.confirm('真的要重置密码吗？', function (index) {
                                console.log(data.id);
                                $.ajax({
                                    type: 'POST',
                                    url: "/user/reset_password",
                                    data: postData,
                                    dataType: 'json',
                                    beforeSend: function () {
                                    },
                                    success: function (res) {
                                        console.log(res);
                                        if (res.code == 0) {
                                            $('#search').click();
                                            layer.msg(res.msg);
                                        } else {
                                            layer.msg(res.msg, {
                                                icon: 2,
                                                anim: 6
                                            });
                                        }
                                    }
                                });
                                layer.close(index);
                            })
                        }
                    });
                    $('#add').click(function () {
                        layer.open({
                            type: 2,
                            title: '新增',
                            fixed: false,
                            maxmin: true,
                            area: ['80%', '80%'],
                            content: '/user/form?id=0'
                        })
                    });
                    $('#batchImport').click(function (){
                        document.getElementById('excelFile').click();
                    });
                    $('#excelFile').change(function (){
                        var file = this.files[0];
                        if (!file) {
                            layer.msg('请选择一个文件上传！');
                            return;
                        }
                        var formData = new FormData();
                        formData.append('file', file)

                        // 发送文件到后端
                        $.ajax({
                            url: '/user/batchImport',
                            type: 'POST',
                            data: formData,
                            processData: false, // 不对数据进行处理
                            contentType: false, // 不设置内容类型
                            success: function (res) {
                                console.log(res)
                                if (res.code == 0) {
                                    $('#search').click();
                                    layer.msg('导入成功！共导入 ' + res.data + ' 条数据。',{
                                        icon: 1,
                                        time: 1500
                                    });

                                } else {
                                    layer.msg('上传失败：' + res.msg, { icon: 2 });
                                }
                            },
                            error: function () {
                                layer.close(index);
                                layer.msg('上传失败，请稍后重试！', { icon: 2 });
                            },
                            complete: function () {
                                // 上传完成后重置文件控件
                                $('#excelFile').val('');
                            }
                        });
                    })

                })
            </script>


        </div>
    </div>
</div>

<footer>
    <!-- JS部分 -->
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var jsUrl = "/static/module/javaweb_" + item[0] + ".js";
        document.write("<script src='" + jsUrl + "'><\/script>");
    </script>
</footer>
</body>
</html>
